<template>
	<view class="eventReservation">
		<view class="root">
		    <ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex'
		    @ed='ed' @dateChange='dateChange'></ren-dropdown-filter>
		</view>
		<view class="reservationList">
			<view class="reservationItem" v-for="(item,index) in reservationList" :key='index' @click="seeDetail">
				<view class="pic">
					<img :src=item.img alt="">
					<view class="seckill">
						<img src="../../static/images/ms.png" v-if="item.code==1" alt="">
						<img src="../../static/images/yuding.png" v-if="item.code==2" alt="">
					</view>
					<view class="freeItem">
						<view class="jf" v-if="item.jf">{{item.jf}}积分/张</view>
						<view class="mf" v-if="!item.jf">免费</view>
					</view>
				</view>
				<view class="tit">{{item.tit}}</view>
				<view class="btn">
					<view class="btn1">其他</view>
					<view class="btn2">热门活动</view>
				</view>
				<view class="dataTit">
					<img src="../../static/images/dataIcon.png" alt="">
					<text>{{item.star}}</text> 至 <text>{{item.end}}</text>
				</view>
				<view class="address">
					<img src="../../static/images/addrees.png" alt="">
					<text>{{item.address}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	export default {
		components:{
			RenDropdownFilter
		},
		data() {
			return {
				filterData: [
					[{
						text: '全部类型',
						value: ''
					}, {
						text: '展览',
						value: 1
					}, {
						text: '亲子',
						value: 2
					}, {
						text: '培训',
						value: 3
					}],
					[{
						text: '智能排序',
						value: ''
					}, {
						text: '热门',
						value: 1
					}, {
						text: '最新',
						value: 2
					}, {
						text: '即将结束',
						value: 3
					}]
				],
				defaultIndex: [0, 0],
				reservationList:[
					{img:'../../static/images/servationBanner.png',code:'1',jf:'5665',tit:'开封三部大戏即将亮相sdfgdfghfgdfdsg...',star:'2021-10-01',end:'2021-10-07',address:'驻马店工人文化宫'},
					{img:'../../static/images/servationBanner.png',code:'2',tit:'开封三部大戏即将亮相sdgsdg...',star:'2021-10-01',end:'2021-10-07',address:'驻马店工人文化宫'},
					{img:'../../static/images/servationBanner.png',code:'1',jf:'5665',tit:'开封三部大戏即将亮相.sdgsdg..',star:'2021-10-01',end:'2021-10-07',address:'驻马店工人文化宫'},
					{img:'../../static/images/servationBanner.png',code:'2',tit:'开封三部大戏即将亮相.sdgsdg..',star:'2021-10-01',end:'2021-10-07',address:'驻马店工人文化宫'},
					{img:'../../static/images/servationBanner.png',code:'2',tit:'开封三部大戏即将亮相.sdgsdg..',star:'2021-10-01',end:'2021-10-07',address:'驻马店工人文化宫'},
					{img:'../../static/images/servationBanner.png',code:'1',jf:'5665',tit:'开封三部大戏即将亮相.sdgsdg..',star:'2021-10-01',end:'2021-10-07',address:'驻马店工人文化宫'}
				]
			}
		},
		methods: {
			// 查看详情的点击事件
			seeDetail(){
				uni.navigateTo({
					url:'/pages/activityDetail/activityDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped src="./eventReservation.scss">
  
</style>
